<template>
	<view :class="['blues-empty']" :style="[Bg, Height]">
		<image :style="ImgSize" :src="Img" mode="aspectFit"></image>
		<view class="text">{{ text }}</view>
		<view class="slot" v-if="$slots.default"><slot></slot></view>
	</view>
</template>

<script setup>
import { computed } from 'vue';
import qxSvg from '@/static/empty/qx.svg';
import kaifaSvg from '@/static/empty/kaifa.svg';
import recordSvg from '@/static/empty/record.svg';
import dateSvg from '@/static/empty/date.svg';

const list = [
	{ name: '无权限', img: qxSvg },
	{ name: '正在开发中', img: kaifaSvg },
	{ name: '暂无历史记录', img: recordSvg },
	{ name: '暂无日程安排', img: dateSvg }
];

// Props declaration
const props = defineProps({
	img: {
		type: String,
		default: '暂无历史记录'
	},
	imgSize: {
		type: [String, Number],
		default: '320'
	},
	text: {
		type: String,
		default: '暂无数据'
	},
	bg: {
		type: String,
		default: '#f8f8f8'
	},
	height: {
		type: String,
		default: '300rpx'
	}
});

const Img = computed(() => {
	const found = list.find((el) => el.name === props.img);
	if (found) {
		return found.img; // Return the imported SVG file directly
	}

	// Fallback to external URL or default SVG image
	if (props.img.endsWith('.jpg') || props.img.endsWith('.png') || props.img.endsWith('.svg')) {
		return props.img;
	} else {
		return recordSvg; // Default image
	}
});
// Computed properties
const Bg = computed(() => `background-color: ${props.bg};`);

const Height = computed(() => {
	// Allow various units for height (rpx, px, rem, etc.)
	if (['rpx', 'px', 'rem', 'em', 'vw', 'vh', '%'].includes(props.height)) {
		return `min-height: ${props.height}`;
	} else {
		return `min-height: ${props.height}rpx`; // Default to rpx
	}
});

const ImgSize = computed(() => {
	// Handle dynamic image size based on input (rpx, px, etc.)
	if (['rpx', 'px', 'rem', 'em', 'vw', '%'].includes(props.imgSize)) {
		return `width: ${props.imgSize}; height: ${props.imgSize};`;
	} else {
		return `width: ${props.imgSize}rpx; height: ${props.imgSize}rpx;`; // Default to rpx
	}
});
</script>

<style lang="scss">
.blues-empty {
	display: flex;
	flex-direction: column;
	padding: 64rpx 0 !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.text {
	color: #969798;
	padding: 20rpx 0;
}

.slot {
	padding-top: 20rpx;
}
</style>
